<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.10/lib/theme-chalk/index.css">、-->
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div id="app">
    <h2>Please upload CD Record's cue file.</h2>

    <el-upload
            class="el-upload"
            action="/cue/file/upload"
            multiple
            :on-success="onSuccess">
        <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

    <template>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="charsetName"
                    label="编码名称"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="charset"
                    label="编码格式"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="decodedContent"
                    label="CUE解码内容">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="convertAndDownload(scope.row)" type="text" size="small">转换并下载</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                tableData: []
            }
        },
        methods: {
            onSuccess: function (response) {
                if (response.status == 200) {
                    this.tableData = response.data;
                } else {
                    this.$message.error(response.msg);
                }
            },
            convertAndDownload: function (row) {
                axios.post("/cue/file/convertAndDownload", {
                    charsetName: row.charsetName,
                    decodedContent: row.decodedContent,
                    fileName: row.fileName
                }).then(function (response) {
                    debugger
                    let url = window.URL.createObjectURL(new Blob([response.data]))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', decodeTool.decode(response.headers.filename))


                    document.body.appendChild(link)
                    link.click()
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    })
</script>

<script type="application/javascript">
    var decodeTool = {
        decode: function (inputStr) {
            var resultArr = [];
            for (var i = 0; i < inputStr.length; i++) {
                var chr = inputStr.charAt(i);
                if (chr == "+") {
                    resultArr[resultArr.length] = " ";
                } else if (chr == "%") {
                    var asc = inputStr.substring(i + 1, i + 3);
                    if (parseInt("0x" + asc) > 0x7f) {
                        resultArr[resultArr.length] = decodeURI(inputStr.substring(i, i + 9));
                        i += 8;
                    } else {
                        resultArr[resultArr.length] = String.fromCharCode(parseInt("0x" + asc));
                        i += 2;
                    }
                } else {
                    resultArr[resultArr.length] = chr;
                }
            }
            return resultArr.join("");
        }
    }
</script>

</html>